import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:massagist/models/massage_model_entity.dart';
import 'package:massagist/pages/massage_info_page.dart';

class MassGridItem extends StatelessWidget {
  late MassageModelEntity model;
  MassGridItem({required this.model});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        width: 172.sp,
        height: 238.sp,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container( child:Image.network( this.model.image, ), ),
            Container(
              height: 66.sp,
              alignment: Alignment.centerLeft,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    margin: EdgeInsets.only(left: 8.sp, top: 7.sp),
                    child: Text(model.name, style: TextStyle(fontSize: 15.sp, fontWeight: FontWeight.w700, color: Color(0xFF110604))),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 8.sp, right: 8.sp, bottom: 8.sp),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          children: [
                            Text("￥", style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w700, color: Color(0xFFFF5147))),
                            Text(model.pay, style: TextStyle(fontSize: 17.sp, fontWeight: FontWeight.w500, color: Color(0xFFFF5147))),
                          ],
                        ),
                        Row(
                          children: [
                            Image.asset("assets/images/time_icon.png", width: 12.sp, height: 12.sp),
                            Container(
                              margin: EdgeInsets.only(left: 2.sp),
                              child: Text(model.time, style: TextStyle(fontSize: 12.sp, color: Color(0xFF999999))),
                            )
                          ],
                        )
                      ],
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) =>  MassageInfoPage(model: this.model,)),
        );
      },
    );
  }
}